<template>
	<van-tabbar :active="dataActive" z-index="999" style="height: 65px;">
		<van-tabbar-item v-for="(item,index) in dataList" :key="index" @click="onChangeTab(item)">
			<image slot="icon" :src="item.icon" mode="aspectFit" style="width: 28px; height: 28px;" />
			<image slot="icon-active" :src="item.activeIcon" mode="aspectFit" style="width: 28px; height: 28px;" />
			{{item.text}}
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				dataActive: this.active,
				dataList: this.$store.state.tabBar //1:房东，2:房客
			}
		},
		props: {
			active: {
				type: Number,
				default: () => 0
			}
		},
		watch: {
			'$store.state.tabBar': {
				handler: function(newVal, oldVal) {
					// console.log('newVal====>', newVal)
					this.dataList = newVal || [];
				}
			}
		},
		methods: {
			onChangeTab(item) {
				uni.switchTab({
					url: item.pagePath
				})
			}
		}
	}
</script>

<style lang="scss">
</style>